<template>
  <section>
    <!-- tool bar -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="member.query">
        <el-form-item>
          <el-input v-model="member.query.condition" placeholder="查询姓名或手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="conditionQuery">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!-- list -->
    <el-table :data="member.members" highlight-current-row border v-loading="member.loading" style="width: 100%;">
      <el-table-column type="expand">
        <template scope="props">
          <el-form class="expand-form" label-position="left" inline>
            <el-form-item label="IPS账户:" label-width="250px;">
              <span>{{ props.row.ips_acct_no }}</span>
            </el-form-item>
            <el-form-item label="总资产(元):">
              <span>{{ props.row.all_assets }}</span>
            </el-form-item>
            <el-form-item label="可用余额(元):">
              <span>{{ props.row.all_balance }}</span>
            </el-form-item>
            <el-form-item label="总借款金额(元):">
              <span>{{ props.row.all_repayment }}</span>
            </el-form-item>
            <el-form-item label="总冻结金额(元):">
              <span>{{ props.row.all_frost}}</span>
            </el-form-item>
            <el-form-item label="待收本金(元):">
              <span>{{ props.row.all_balance_await }}</span>
            </el-form-item>
            <el-form-item label="待收利息(元):">
              <span>{{ props.row.all_interest_await }}</span>
            </el-form-item>
            <el-form-item label="充值总额(元):">
              <span>{{ props.row.all_recharge }}</span>
            </el-form-item>
            <el-form-item label="投标总额(元):">
              <span>{{ props.row.all_recharge }}</span>
            </el-form-item>
            <el-form-item label="收益总额(元):">
              <span>{{ props.row.all_interest }}</span>
            </el-form-item>
            <el-form-item label="待还总额(元):">
              <span>{{ props.row.all_repayment_await }}</span>
            </el-form-item>
            <el-form-item label="总提现金额(元):">
              <span>{{ props.row.all_cash }}</span>
            </el-form-item>
            <el-form-item label="总提现手续费(元):">
              <span>{{ props.row.all_withdraw_handing }}</span>
            </el-form-item>
            <el-form-item label="提前还款补偿金(元):">
              <span>{{ props.row.all_compensation }}</span>
            </el-form-item>
            <el-form-item label="IPS账户激活状态:">
              <span>{{ props.row.ips_status  == 1 ? '已激活' : '未激活' }}</span>
            </el-form-item>
            <el-form-item label="红包总额(元):">
              <span>{{ props.row.redBag_amount }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="user_id" label="用户ID" width="150"></el-table-column>
      <el-table-column prop="user_name" label="用户名" width="150"></el-table-column>
      <el-table-column prop="real_name" label="真实姓名" width="100"></el-table-column>
      <el-table-column prop="card_no" label="身份证号码" width="200" :formatter="formatCardNo"></el-table-column>
      <el-table-column prop="mobile" label="手机号" width="130"></el-table-column>
      <el-table-column prop="bank_no" label="银行卡账号" width="200" :formatter="formatBankno"></el-table-column>
      <el-table-column prop="email" label="电子邮箱" width="200"></el-table-column>
      <el-table-column prop="create_time" label="注册时间" width="200"></el-table-column>
      <!--
      <el-table-column label="操作" width="150">
        <template scope="scope">
          <el-button @click="submit(scope.$index, scope.row)" type="primary" size="small">确认项目还款</el-button>
        </template>
      </el-table-column>
      -->
    </el-table>
    <!-- pagination -->
    <el-col :span="24" class="toolbar">
      <el-pagination class="pagination" layout="prev, pager, next" :current-page="member.curPage" :page-size="member.pageSize"
        :total="member.total" @current-change="handleChange">
      </el-pagination>
    </el-col>
  </section>
</template>
<script>
  import {
    mapActions,
    mapGetters
  } from 'vuex'

  export default {
    computed: {
      ...mapGetters([
        'member'
      ])
    },

    methods: {
      ...mapActions([
        'getMemberList'
      ]),
      formatCardNo(row, column) {
        return this.formatEmpty(row.card_no);
      },
      formatBankno(row, column) {
        return this.formatEmpty(row.bank_no);
      },
      formatEmpty(field) {
        return (field && field != '') ? field : '******';
      },
      conditionQuery() {
        this.getMemberList({
          vm: this
        });
      },
      reset() {
        this.member.query.condition = '';
      },
      handleChange(val) {
        this.getMemberList({
          vm: this,
          page: val
        });
      }
    },

    mounted() {
      this.getMemberList({
        vm: this
      });
    }
  }
</script>

<style lang="scss" scoped>
  .expand-form {
    font-size: 0;
    label {
      width: 100px;
      color: #99a9bf;
    }
    .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 50%;
    }
  }
</style>